"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { 
  getFinalEncoding, 
  getToneChineseName,
  getToneName
} from "@/lib/ganyin-data";

interface GanyinDetailProps {
  final: string;
  tone?: number;
}

export default function GanyinDetail({ final, tone }: GanyinDetailProps) {
  const finalData = getFinalEncoding(final);
  
  if (!finalData) {
    return (
      <Card>
        <CardContent className="pt-6">
          <p>未找到 "{final}" 的编码信息</p>
        </CardContent>
      </Card>
    );
  }
  
  // 如果指定了声调，只显示该声调的信息
  const tonesToShow = tone ? [tone] : [1, 2, 3, 4];
  
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center">
          <span className="text-2xl mr-2">{final}</span>
          <span>韵母详细编码</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {tonesToShow.map((t) => {
            const index = t - 1;
            const display = finalData.display[index];
            const encoding = finalData.encodings[display];
            
            return (
              <div key={t} className="border rounded-lg p-4">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center space-x-2">
                    <span className={`text-2xl font-bold tone-${getToneName(t)}`}>
                      {display}
                    </span>
                    <Badge variant="outline">{getToneChineseName(t)}</Badge>
                  </div>
                  <div className="ganyin-symbol private-use-char text-2xl">
                    {encoding}
                  </div>
                </div>
                
                <div className="mt-4">
                  <h4 className="text-sm font-semibold mb-2">编码组成</h4>
                  <div className="flex space-x-2">
                    {encoding.split('').map((symbol, i) => (
                      <div key={i} className="flex flex-col items-center">
                        <span className="ganyin-symbol private-use-char">{symbol}</span>
                        <span className="text-xs text-muted-foreground mt-1">
                          {i === 0 ? "第一音元" : i === 1 ? "第二音元" : "第三音元"}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
                
                <div className="mt-4">
                  <h4 className="text-sm font-semibold mb-2">编码规则</h4>
                  <p className="text-sm text-muted-foreground">
                    {t === 1 && "三个高调音元的组合"}
                    {t === 2 && "低调音元、中调音元、高调音元的组合"}
                    {t === 3 && "三个低调音元的组合"}
                    {t === 4 && "高调音元、中调音元、低调音元的组合"}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}